<template>
	<view class="web-container">
		<!-- 顶部导航栏 -->
		<view class="top-navbar">
			<view class="container-fluid">
				<view class="row align-items-center">
					<view class="col-lg-3 col-md-3 col-sm-12">
						<view class="logo">
							<image src="/static/petLogo.png" mode="aspectFit"></image>
							<text class="titleText">宠物健康管家</text>
						</view>
					</view>
					<view class="col-lg-6 col-md-6 col-sm-12">
						<view class="navbar-center">
							<!-- 分类导航移到这里 -->
							<view class="nav-categories">
								<view class="nav-item" @click="goIndex">
									<text class="titleText">首页</text>
								</view>
								<view class="nav-item" @click="goHealth">
									<text class="titleText">健康</text>
								</view>
								<view class="nav-item" @click="goShop">
									<text class="titleText">商城</text>
								</view>
								<view class="nav-item" @click="goForum">
									<text class="titleText">论坛</text>
								</view>
							</view>
							<!-- 搜索栏缩短 -->
							<view class="search-container">
								<image src="/static/index/search-icon.png" mode="aspectFill"></image>
								<input type="text" placeholder="搜索宠物食品" class="search-input" />
								<button class="search-btn">搜索</button>
							</view>
						</view>
					</view>
					<view class="col-lg-3">
						<view class="user-actions">
							<view class="action-item" @click="goMine">
								<image src="/static/Tabbar/mine.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">我的账户</text>
							</view>
							<view class="action-item" @click="goShopCar">
								<image src="/static/Tabbar/shop.png" style="width: 60rpx;height: 60rpx;"
									mode="aspectFill"></image>
								<text class="titleText">购物车</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main-content">
			<view class="product-gallery-section">
				<!-- 商品图片 -->
				<image :src="productImages" mode="aspectFill" class="swiper-image"></image>
			</view>

			<view class="product-info-section">
				<!-- 店铺信息 -->
				<view class="shop-info">
					<image :src="productInfo.brandLogo" mode="aspectFill" class="shop-logo"></image>
					<view class="shop-detail">
						<text class="shop-name">{{ productInfo.brandName }}</text>
						<view class="shop-stats">
							<text class="shop-stat">商品: {{ productInfo.brandProductCount }}</text>
							<text class="shop-stat">关注: {{ productInfo.brandFollowerCount }}</text>
						</view>
					</view>
					<button class="btn-check-shop" @click="navigateToBrand(productInfo.brandId)">进店逛逛</button>
				</view>
				<!-- 商品基本信息 -->
				<view class="product-basic-info">
					<text class="product-name">{{ productInfo.name }}</text>
					<view class="product-tags">
						<view class="product-tag" v-for="(tag, index) in productInfo.tags" :key="index">
							{{ tag }}
						</view>
					</view>
					<view class="product-price-row">
						<text class="product-price">¥{{ productInfo.price.toFixed(2) }}</text>
						<text class="product-original-price" v-if="productInfo.originalPrice">
							¥{{ productInfo.originalPrice.toFixed(2) }}
						</text>
					</view>
					<view class="product-stats">
						<text class="product-stat">销量: {{ productInfo.salesCount }}</text>
						<text class="product-stat">评价: {{ productInfo.reviewCount }}</text>
						<text class="product-stat">评分: {{ productInfo.rating.toFixed(1) }}</text>
					</view>
				</view>

				<!-- 商品规格选择 -->
				<view class="product-specs">
					<view class="specs-header">
						<text class="specs-title">规格选择</text>
						<text class="specs-selected">已选: {{ getSelectedSpecsText() }}</text>
					</view>

					<view class="specs-section" v-for="(spec, specIndex) in productSpecs" :key="specIndex">
						<text class="spec-type">{{ spec.name }}</text>
						<view class="spec-options">
							<view class="spec-option" v-for="(option, optionIndex) in spec.options" :key="optionIndex"
								:class="{ 'active': selectedSpecs[spec.name] === option.value, 'disabled': !option.available }"
								@click="selectSpec(spec.name, option.value, option.available)">
								{{ option.label }}
							</view>
						</view>
					</view>

					<view class="quantity-section">
						<text class="quantity-label">数量</text>
						<view class="quantity-control">
							<view class="quantity-btn" @click="decreaseQuantity">-</view>
							<input type="number" class="quantity-input" v-model="quantity" />
							<view class="quantity-btn" @click="increaseQuantity">+</view>
						</view>
					</view>

					<!-- 购买按钮放到商品信息区 -->
					<view class="purchase-buttons-web">
						<button class="btn-add-cart" @click="addToCart">加入购物车</button>
						<button class="btn-buy-now" @click="buyNow">立即购买</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品详情区域 -->
		<view class="product-details-web">
			<view class="tabs-web">
				<view class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': currentTab === index }"
					@click="switchTab(index)">
					{{ tab }}
				</view>
			</view>

			<view class="tab-content-web">
				<!-- 商品介绍 -->
				<view v-if="currentTab === 0" class="product-description">
					<text v-if="productInfo.introduction">{{ productInfo.introduction }}</text>
					<view v-else>暂无商品描述</view>
				</view>

				<!-- 规格参数 -->
				<view v-if="currentTab === 1" class="product-params">
					<view class="param-item" v-for="(param, index) in productInfo.params" :key="index">
						<text class="param-name">{{ param.name }}</text>
						<text class="param-value">{{ param.value }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 猜你喜欢 -->
		<view class="recommended-web">
			<view class="section-title">猜你喜欢</view>
			<view class="recommended-grid">
				<view class="recommended-item" v-for="(item, index) in recommendedProducts" :key="index"
					@click="navigateToDetail(item.id)">
					<image :src="item.picture" mode="aspectFill" class="recommended-image"></image>
					<text class="recommended-name">{{ item.tradeName }}</text>
					<text class="recommended-price">¥{{ item.prices.toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<!-- 浮动的购物车图标 -->
		<view class="floating-cart" @click="navigateToCart">
			<text class="action-icon">🛒</text>
			<text class="cart-badge" v-if="cartItemCount > 0">{{ cartItemCount }}</text>
		</view>

		<!-- 购物车成功提示 -->
		<view class="add-cart-popup" v-if="showCartPopup">
			<view class="popup-content">
				<text class="popup-icon">✓</text>
				<text class="popup-text">已加入购物车</text>
			</view>
		</view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar.vue'
	import {
		productApi
	} from '@/api/user.js'
	export default {
		components: {
			titleBar
		},
		data() {
			return {
				productId: null,
				productInfo: {
					id: 1,
					name: "",
					price: 0,
					originalPrice: null,
					salesCount: "",
					reviewCount: 0,
					rating: 4.8,
					tags: [],
					brandId: 1,
					brandName: "品牌名称",
					brandLogo: "/static/pet-test.png",
					brandProductCount: 568,
					brandFollowerCount: 2354,
					isFavorite: false,
					introduction: "",
					params: [],
					reviews: [{
							username: "用户**123",
							avatar: "/static/pet-test.png",
							rating: 5,
							content: "狗狗很喜欢吃，吃了这个狗粮精神状态好很多，毛发也亮了。包装严实，价格也合适，已经回购多次了！",
							images: ["/static/pet-test.png", "/static/pet-test.png"],
							time: "2025-03-15",
							spec: "规格：2.5kg"
						},
						{
							username: "宠物达人",
							avatar: "/static/pet-test.png",
							rating: 4,
							content: "质量不错，就是送货有点慢，家里的两只小泰迪都很爱吃。",
							images: [],
							time: "2025-03-10",
							spec: "规格：2.5kg"
						}
					]
				},
				productImages: '',
				productSpecs: [],
				selectedSpecs: {},
				quantity: 1,
				tabs: ["商品介绍", "规格参数"],
				currentTab: 0,
				recommendedProducts: [],
				cartItemCount: null,
				showCartPopup: false,
				currentMainImage: 0
			}
		},
		mounted() {
			this.productId = getApp().globalData.currentGoodId;
			console.log(this.productId);
			this.fetchProductInfo();
			this.fetchCartData();
			this.getGoods();
		},
		methods: {
			// 切换主图
			changeMainImage(index) {
				this.currentMainImage = index;
			},
			async getGoods() {
				try {
					const result = await productApi.getProductList()
					this.recommendedProducts = result.slice(0, 8)
				} catch (error) {
					uni.showToast({
						title: '获取商品失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品失败', error);
				}
			},
			// 获取商品信息
			async fetchProductInfo() {
				try {
					const result = await productApi.getProductDetail({
						id: this.productId
					});

					// 更新商品基本信息
					this.productInfo.id = result.id;
					this.productInfo.name = result.tradeName;
					this.productInfo.price = result.prices;
					this.productInfo.salesCount = result.salesVolume;
					this.productInfo.introduction = result.introduction;
					this.productImages = result.picture;

					// 处理标签 - 将字符串拆分为数组
					this.productInfo.tags = result.label ? result.label.split(' ') : [];

					// 处理评分 - 转换为数字
					this.productInfo.rating = parseFloat(result.evaluate.replace('分', ''));

					// 更新商品参数
					this.productInfo.params = [{
							name: "品牌",
							value: result.brand
						},
						{
							name: "产地",
							value: result.origin
						},
						{
							name: "净含量",
							value: result.netContent
						},
						{
							name: "适用种类",
							value: result.applicableType
						},
						{
							name: "适用年龄",
							value: result.applicableAge
						},
						{
							name: "口味",
							value: result.taste
						}
					];

					// 更新商品规格选项
					this.productSpecs = [{
							name: "规格",
							options: [{
								label: result.standards,
								value: result.standards,
								available: true
							}]
						},
						{
							name: "口味",
							options: [{
								label: result.taste,
								value: result.taste,
								available: true
							}]
						}
					];

					// 设置默认选中的规格
					this.selectedSpecs = {
						"规格": result.standards,
						"口味": result.taste
					};

					console.log("商品数据加载成功:", result);
				} catch (error) {
					uni.showToast({
						title: '获取商品信息失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('获取商品信息失败', error);
				}
			},

			// 使用uni-app的预览图片API
			previewImage(currentImage) {
				uni.previewImage({
					urls: [this.productImages], // 图片数组
					current: 0, // 当前点击的图片
					indicator: 'number',
					loop: true
				});
			},

			// 获取当前选择的规格文本
			getSelectedSpecsText() {
				let result = '';
				for (const key in this.selectedSpecs) {
					if (result) result += ', ';
					result += `${key}: ${this.selectedSpecs[key]}`;
				}
				if (result) result += `, 数量: ${this.quantity}`;
				return result || '请选择商品规格';
			},

			// 选择规格
			selectSpec(specName, value, available) {
				if (!available) return;
				this.selectedSpecs[specName] = value;
			},

			// 增加数量
			increaseQuantity() {
				this.quantity++;
			},

			// 减少数量
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},

			// 切换标签
			switchTab(index) {
				this.currentTab = index;
			},

			// 加载更多评价
			loadMoreReviews() {
				uni.showToast({
					title: '加载更多评价',
					icon: 'none'
				});
			},

			// 切换收藏状态
			toggleFavorite() {
				this.productInfo.isFavorite = !this.productInfo.isFavorite;
				uni.showToast({
					title: this.productInfo.isFavorite ? '已加入收藏' : '已取消收藏',
					icon: 'none'
				});
			},

			// 联系客服
			contactShop() {
				uni.showToast({
					title: '客服功能即将上线',
					icon: 'none'
				});
			},

			async fetchCartData() {
				try {
					const result = await productApi.getShopCar();
					this.cartItemCount = result.length;
					console.log("购物车商品数量:", result.length);
				} catch (error) {
					console.error('获取购物车信息失败：', error);
				}
			},

			// 加入购物车
			async addToCart() {
				// 校验规格是否选择完整
				for (const spec of this.productSpecs) {
					if (!this.selectedSpecs[spec.name]) {
						uni.showToast({
							title: `请选择${spec.name}`,
							icon: 'none'
						});
						return;
					}
				}

				try {
					const result = await productApi.putShopCar({
						goodsId: this.productId,
						goodsNum: this.quantity
					});

					// 更新购物车计数
					this.cartItemCount++;

					// 显示加入购物车成功提示
					this.showCartPopup = true;
					setTimeout(() => {
						this.showCartPopup = false;
					}, 1500);
				} catch (error) {
					uni.showToast({
						title: '加入购物车失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('加入购物车失败：', error);
				}
			},

			// 立即购买
			buyNow() {
				// 校验规格是否选择完整
				for (const spec of this.productSpecs) {
					if (!this.selectedSpecs[spec.name]) {
						uni.showToast({
							title: `请选择${spec.name}`,
							icon: 'none'
						});
						return;
					}
				}

				// 跳转到订单确认页面
				uni.navigateTo({
					url: '/pages/order/confirm'
				});
			},

			// 导航到购物车页面
			navigateToCart() {
				uni.navigateTo({
					url: '/pages/shop/shopCar'
				});
			},

			// 导航到品牌详情页
			navigateToBrand(brandId) {
				uni.navigateTo({
					url: `/pages/brand/detail?id=${brandId}`
				});
			},

			// 导航到商品详情
			navigateToDetail(id) {
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				});
			},
			goShop() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goForum() {
				uni.switchTab({
					url: '/pages/forum/forum'
				})
			},
			goMine() {
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},
			goHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			goShopCar() {
				uni.navigateTo({
					url: '/pages/shop/shopCar'
				})
			},
		}
	}
</script>

<style scoped>
	.web-container {
		/* max-width: 1200px; */
		/* margin: 0 auto; */
		padding: 0 0px;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏样式 */
	.top-navbar {
		background-color: white;
		padding: 15px 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.logo {
		display: flex;
		align-items: center;
	}

	.logo image {
		width: 60px;
		height: 60px;
		margin-right: 15px;
	}

	.logo .titleText {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
	}

	.navbar-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.nav-categories {
		display: flex;
	}

	.nav-item {
		padding: 8px 15px;
		color: #000000;
		font-size: 20px;
		font-weight: bold;
		cursor: pointer;
		margin-right: 10px;
		border-radius: 5px;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.search-container {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		max-width: 300px;
	}

	.search-container image {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.search-input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 15px;
		padding: 5px 5px;
		background-color: transparent;
	}

	.search-btn {
		background-color: #F9CB43;
		color: #fff;
		border: none;
		border-radius: 0 50px 50px 0;
		padding: 5px 15px;
		font-size: 14px;
		cursor: pointer;
	}

	.user-actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20px;
		cursor: pointer;
	}

	.action-item image {
		width: 24px;
		height: 24px;
	}

	.action-item .titleText {
		margin-top: 5px;
		color: #000000;
		font-size: 14px;
	}

	/* 主内容区布局 */
	.main-content {
		display: flex;
		gap: 30px;
		padding: 0 80px;
	}

	.product-gallery-section {
		margin-top: 240rpx;
		flex: 0 0 45%;
	}

	.product-info-section {
		margin-top: 240rpx;
		flex: 0 0 53.7%;
	}

	/* 轮播图样式 */
	.product-swiper {
		height: 100%;
		border-radius: 10px;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 缩略图预览 */
	.thumbnail-preview {
		display: flex;
		margin-top: 20px;
		gap: 10px;
	}

	.thumbnail-item {
		width: 80px;
		height: 80px;
		border-radius: 5px;
		overflow: hidden;
		cursor: pointer;
		border: 2px solid transparent;
	}

	.thumbnail-item:hover {
		border-color: #FF6B35;
	}

	.thumbnail-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 商品基本信息样式 */
	.product-basic-info {
		background-color: #fff;
		border-radius: 10px;
		padding: 25px;
		margin-bottom: 20px;
		margin-top: 20px;
	}

	.product-name {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		line-height: 1.4;
		display: block;
	}

	.product-tags {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 15px;
	}

	.product-tag {
		font-size: 12px;
		color: #FF6B35;
		background-color: rgba(255, 107, 107, 0.1);
		padding: 4px 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		border-radius: 4px;
	}

	.product-price-row {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.product-price {
		font-size: 30px;
		font-weight: bold;
		color: #FF6B35;
	}

	.product-original-price {
		font-size: 16px;
		color: #999;
		text-decoration: line-through;
		margin-left: 15px;
	}

	.product-stats {
		display: flex;
		font-size: 14px;
		color: #666;
	}

	.product-stat {
		margin-right: 30px;
	}

	/* 商品规格选择样式 */
	.product-specs {
		background-color: #fff;
		border-radius: 10px;
		padding: 25px;
		margin-top: 20px;
	}

	.specs-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.specs-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.specs-selected {
		font-size: 14px;
		color: #666;
	}

	.specs-section {
		margin-bottom: 20px;
	}

	.spec-type {
		font-size: 16px;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}

	.spec-options {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.spec-option {
		background-color: #f5f5f5;
		border-radius: 6px;
		padding: 8px 20px;
		font-size: 14px;
		color: #333;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.spec-option:hover {
		background-color: rgba(255, 107, 107, 0.05);
	}

	.spec-option.active {
		background-color: rgba(255, 107, 107, 0.1);
		color: #FF6B35;
		border: 1px solid #FF6B35;
	}

	.spec-option.disabled {
		color: #ccc;
		background-color: #f5f5f5;
		cursor: not-allowed;
	}

	.quantity-section {
		display: flex;
		align-items: center;
		margin-top: 20px;
		margin-bottom: 30px;
	}

	.quantity-label {
		font-size: 16px;
		color: #333;
		margin-right: 20px;
	}

	.quantity-control {
		display: flex;
		align-items: center;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
	}

	.quantity-btn {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		background-color: #f5f5f5;
		cursor: pointer;
		user-select: none;
	}

	.quantity-btn:hover {
		background-color: #e0e0e0;
	}

	.quantity-input {
		width: 60px;
		height: 40px;
		text-align: center;
		font-size: 16px;
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
	}

	/* 网页版购买按钮 */
	.purchase-buttons-web {
		display: flex;
		gap: 20px;
		margin-top: 10px;
	}

	.btn-add-cart,
	.btn-buy-now {
		height: 50px;
		flex: 1;
		font-size: 16px;
		border-radius: 25px;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn-add-cart {
		background-color: #FFF0F0;
		color: #FF6B35;
		border: 1px solid #FF6B35;
	}

	.btn-add-cart:hover {
		background-color: #FFE0E0;
	}

	.btn-buy-now {
		background-color: #FF6B35;
		color: #fff;
		border: 1px solid #FF6B35;
	}

	.btn-buy-now:hover {
		background-color: #FF5722;
	}

	/* 店铺信息样式 */
	.shop-info {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
	}

	.shop-logo {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.shop-detail {
		flex: 1;
		margin-left: 15px;
	}

	.shop-name {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 8px;
		display: block;
	}

	.shop-stats {
		display: flex;
		font-size: 14px;
		color: #666;
	}

	.shop-stat {
		margin-right: 20px;
	}

	.btn-check-shop {
		padding: 8px 20px;
		font-size: 14px;
		border-radius: 20px;
		background-color: #fff;
		color: #FF6B35;
		border: 1px solid #FF6B35;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-check-shop:hover {
		background-color: #FFF0F0;
	}

	/* 商品详情区域样式 */
	.product-details-web {
		background-color: #fff;
		border-radius: 10px;
		margin-top: 30px;
		overflow: hidden;
		width: 70%;
		margin: 20px auto;
	}

	.tabs-web {
		display: flex;
		border-bottom: 1px solid #f0f0f0;
		background-color: #f9f9f9;
	}

	.tab {
		padding: 20px 40px;
		font-size: 16px;
		color: #333;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.tab:hover {
		color: #FF6B35;
	}

	.tab.active {
		color: #FF6B35;
		font-weight: bold;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 3px;
		background-color: #FF6B35;
	}

	.tab-content-web {
		padding: 30px;
	}

	/* 商品介绍样式 */
	.product-description {
		line-height: 1.8;
		color: #333;
	}

	/* 商品介绍样式 - 修改为两列图片布局 */
	.detail-images {
		margin-top: 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
	}

	.detail-image {
		width: 100%;
		border-radius: 8px;
	}

	/* 规格参数样式 */
	.product-params {
		padding: 10px 0;
	}

	.param-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.param-name {
		width: 150px;
		color: #666;
		font-size: 14px;
	}

	.param-value {
		flex: 1;
		color: #333;
		font-size: 14px;
	}

	/* 用户评价样式 */
	.review-stats {
		display: flex;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.review-rating {
		font-size: 36px;
		font-weight: bold;
		color: #FF6B35;
		margin-right: 20px;
	}

	.review-stars {
		display: flex;
		margin-right: 20px;
	}

	.star {
		color: #ddd;
		font-size: 18px;
	}

	.star.filled {
		color: #FFCE00;
	}

	.review-count {
		color: #666;
		font-size: 14px;
	}

	.review-list {
		margin-top: 20px;
	}

	.review-item {
		padding: 20px 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.reviewer-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.reviewer-name {
		color: #333;
		font-size: 14px;
		margin-right: 10px;
	}

	.review-stars.small .star {
		font-size: 14px;
	}

	.review-content {
		font-size: 14px;
		line-height: 1.6;
		color: #333;
		margin-bottom: 15px;
	}

	.review-images {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 15px;
	}

	.review-image {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		object-fit: cover;
	}

	.review-footer {
		display: flex;
		justify-content: space-between;
		color: #999;
		font-size: 12px;
	}

	.load-more {
		text-align: center;
		color: #666;
		padding: 20px 0;
		cursor: pointer;
	}

	.load-more:hover {
		color: #FF6B35;
	}

	/* 猜你喜欢样式 */
	.recommended-web {
		margin-top: 30px;

		padding: 20px 80px;
	}

	.section-title {
		font-size: 22px;
		font-weight: bold;
		margin-bottom: 20px;
		color: #333;
	}

	.recommended-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}

	.recommended-item {
		background-color: #fff;
		border-radius: 10px;
		overflow: hidden;
		cursor: pointer;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.recommended-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	}

	.recommended-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.recommended-name {
		display: block;
		padding: 10px 15px;
		font-size: 14px;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.recommended-price {
		display: block;
		padding: 0 15px 15px;
		font-size: 16px;
		font-weight: bold;
		color: #FF6B35;
	}

	/* 浮动购物车图标 */
	.floating-cart {
		position: fixed;
		right: 30px;
		bottom: 100px;
		width: 50px;
		height: 50px;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		z-index: 100;
		transition: all 0.3s ease;
	}

	.floating-cart:hover {
		transform: scale(1.1);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	}

	.action-icon {
		font-size: 24px;
	}

	.cart-badge {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #FF6B35;
		color: #fff;
		font-size: 12px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 加入购物车弹窗 */
	.add-cart-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 15px 30px;
		border-radius: 30px;
		z-index: 1000;
	}

	.popup-content {
		display: flex;
		align-items: center;
	}

	.popup-icon {
		margin-right: 10px;
		font-size: 18px;
	}

	/* 响应式处理 */
	@media (max-width: 980px) {
		.main-content {
			flex-direction: column;
		}

		.product-gallery-section,
		.product-info-section {
			flex: none;
			width: 100%;
		}

		.recommended-grid {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (max-width: 768px) {
		.tabs-web .tab {
			padding: 15px 20px;
			font-size: 14px;
		}

		.recommended-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 480px) {
		.web-container {
			padding: 0 10px;
		}

		.product-swiper {
			height: 300px;
		}

		.thumbnail-item {
			width: 60px;
			height: 60px;
		}

		.product-name {
			font-size: 20px;
		}

		.product-price {
			font-size: 24px;
		}

		.recommended-grid {
			grid-template-columns: 1fr;
		}
	}

	/* 添加在响应式处理部分 */
	@media (max-width: 768px) {
		.detail-images {
			grid-template-columns: 1fr;
		}
	}
</style>